<template>
  <div class="home-container">
    <!-- 导航栏 -->
     <van-nav-bar class="pagbare-nav-bar" fixed>
       <van-button
       class="search-btn"
       round
       slot="title"
       type="info"
       size="small"
       icon="search"
       to="/search"
       >搜索</van-button>
     </van-nav-bar>
     <!-- 导航栏结束 -->

     <!-- 频道列表 -->
     <van-tabs v-model="active" animated swipeable class="channel-tabs">

       <van-tab :title="item.name" v-for="item in channels" :key="item.id">
         <!-- {{ item.name }}的内容 1 -->
         <!-- 文章列表  填充的内容应为 ArticleList组件的页面内容 -->
         <ArticleList :item="item"></ArticleList>
       </van-tab>

       <div slot="nav-right" class="placeholder"></div>
       <!-- class=hamburger-btn 汉堡按钮 -->
       <div slot="nav-right" class="hamburger-btn" @click="isChannelEditShow = true">
         <i class="iconfont icongengduo"></i>
       </div>
     </van-tabs>
     <!-- 频道列表结束 -->

     <!-- 频道列表编辑弹出层 -->
     <van-popup
       v-model="isChannelEditShow"
       closeable
       close-icon-position="top-left"
       round
       position="bottom"
       :style="{ height: '80%' }"
     >
     <!-- 向子组件ChannelEdit 传值 频道列表数据 :mychannels="channels" 被激活的索引值 :myactive="active"-->
     <!-- 子组件ChannelEdit  通过事件绑定 :update-active="onUpdateActive" 向父组件通信 欲改变父组件active的值 父组件中active的值发生改变 又会引发子组件"我的频道"高亮显示哪个元素 -->
     <ChannelEdit :mychannels="channels" :myactive="active" @update-active="onUpdateActive"></ChannelEdit>
     <!-- 频道编辑弹出层里面的内容封装成了一个组件 名为 ChannelEdit -->

     </van-popup>
     <!-- 频道列表编辑弹出层结束 -->
  </div>
</template>

<script>
import { Toast } from 'vant' // 导入Toast轻提示 图标
import store from '@/store/index.js'
import { getUserChannels } from '@/api/user.js'
import ArticleList from '@/views/home/components/article-list.vue' // ArticleList 这是 文章列表 组件
import ChannelEdit from '@/views/home/components/channel-edit.vue' // ChannelEdit 频道编辑弹出层里面的内容封装成了一个组件
import { getItem } from '@/utils/localStorage.js'

export default {
  name: 'homeIndex',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      channels: [], // 要渲染到页面的频道列表数据 遍历数据渲染页面
      isChannelEditShow: false // 这是控制 编辑频道 弹出层是否显示 的属性
    }
  },

  created () {
    this.loadChannels()
  },

  methods: {
    async loadChannels () { // 获取频道列表数据的函数
      // try {
      //   const { data } = await getUserChannels()
      //   this.channels = data.data.channels
      // } catch (err) {
      //   Toast('获取频道数据失败')
      // }

      try {
        // 定义一个临时变量 暂时存放要渲染到页面的频道列表数据 最终要将这个临时变量赋值给data中的channels   this.channels = Channels
        let Channels = []
        // 已登录,请求获取用户频道列表
        // 未登录,判断是否有本地存储的频道列表数据
        //     有,拿来使用
        //   没有,请求获取默认频道列表
        if (store.state.user) { // 用户已登录
          const { data } = await getUserChannels() // @/api/user.js  获取频道列表数据的接口请求
          Channels = data.data.channels
        } else { // 用户未登录 检查本地存储是否有 TOUTIAO_CHANNELS这个键值对
          const localChannels = getItem('TOUTIAO_CHANNELS')
          if (localChannels) { // 如果有,则说明在浏览器上曾经添加或者删除过"我的频道"
            Channels = localChannels
          } else { // 没有,请求获取默认频道列表
            const { data } = await getUserChannels()
            Channels = data.data.channels
          }
        }
        this.channels = Channels
        // console.log(data.data.channels)
      } catch (err) {
        Toast('获取频道列表数据失败')
      }
    },

    onUpdateActive (index) { // 通过事件绑定 子组件<ChannelEdit></ChannelEdit>向父组件通信 时所绑定的监听的事件
      this.active = index // 修改父组件active的值 切换父组件中 频道列表中具体显示哪个频道 同时也修改了 我的频道 中高亮显示哪个 频道
      this.isChannelEditShow = false // 关闭弹出层
      // console.log('你吗死了', index)
    }
  }

}
</script>

<style scoped lang="less">
.home-container {
  padding-top: 174px;
  padding-bottom: 100px;
  /deep/ .van-nav-bar__title {
    max-width: unset;
  }
    .search-btn {
    width: 555px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
    }
  }
/deep/ .channel-tabs {
   .van-tabs__wrap {
    position: fixed;
    top: 92px;
    z-index: 1;
    left: 0;
    right: 0;
    height: 82px;
   }

   .van-tab {
    min-width: 200px;
    border-right: 1px solid #edeff3;
    font-size: 30px;
    color: #777777;
   }

   .van-tab--active {
    color: #333333;
   }

   .van-tabs__nav {
    padding-bottom: 0;
   }

   .van-tabs__line {
    bottom: 8px;
    width: 31px !important;
    height: 6px;
    background-color: #3296fa;
   }

   .placeholder {
  flex-shrink: 0;
  width: 66px;
  height: 82px;
   }

   .hamburger-btn {
    position: fixed;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66px;
    height: 82px;
    background-color: #fff;
    opacity: 0.902;

    i.iconfont {
      font-size: 33px;
    }

    &:before {
      content: '';
      position: absolute;
      left: 0;
      width: 1px;
      height: 100%;
      background-image: url(~@/assets/gradient-gray-line.png);
      background-size: contain;
    }
   }
  }
}
</style>
